import { Form, Input, message, Modal } from 'antd';
import React from 'react';

interface CreateModalProps {
  createModalShow: boolean;
  onCancel: () => void;
  onSubmit: (content: string) => void;
}
const CreateModal: React.FC<CreateModalProps> = ({
  createModalShow,
  onCancel,
  onSubmit,
}) => {
  const [form] = Form.useForm();

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  const handleSubmit = () => {
    form
      .validateFields()
      .then((values) => {
        if (values.content) {
          message.success('新建成功');
          onSubmit(values.content); // 调用父组件的onSubmit方法
          form.resetFields(); // 重置表单
        } else {
          message.error('请填写内容');
        }
      })
      .catch((errorInfo) => {
        console.log('Validation failed:', errorInfo);
      });
  };
  return (
    <Modal
      title="新建"
      open={createModalShow}
      onCancel={handleCancel}
      onOk={handleSubmit}
    >
      <Form form={form}>
        <Form.Item
          label="事项内容"
          name="content"
          rules={[{ required: true, message: '请输入事项内容' }]}
        >
          <Input.TextArea rows={3} placeholder="请输入事项内容" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateModal;
